<template>
    <div>
        <div class="page">
            <el-row class="part1_box">
                <el-row style="margin:20px;">
                    <el-row>
                        <el-col :span="2">
                            <el-button @click="handleCard" type="primary">批量新增</el-button>
                        </el-col>
                        <el-col :span="22">
                            <el-button @click="handleState" type="primary">修改状态</el-button>
                        </el-col>
                    </el-row>
                </el-row>
            
                <el-table  @selection-change='handleSelection'  :data='list' >
                    <el-table-column type='selection' width='55' />
                    <el-table-column label="ID" prop='id' />
                    <el-table-column label="手机卡号" prop='cellphone' />
                    <el-table-column label="状态" prop='state'>
                        <template slot-scope='scope'>
                            <div v-if="scope.row.state == 'pending'">等待</div>
                            <div v-if="scope.row.state == 'success'">成功</div>
                            <div v-if="scope.row.state == 'failure'">失败</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop='createdAt'>
                        <template slot-scope="scope">
                            <div>{{scope.row.createdAt | formatDate}}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination  v-show="total>0" :total="total"  :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"  @pagination="getList" />
            </el-row>
        </div>
        <el-dialog title="批量新增" :visible.sync="addView" width="500px" append-to-body>
            <el-form  :model="cardForm"  label-width="140px">
                <el-form-item label="手机卡号:">
                    <el-input type='textarea' rows='8' placeholder=",分隔" v-model="cardForm.cellphones" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="SubmitForm(cardForm)">确 定</el-button>
                <el-button @click="userCancel">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改状态" :visible.sync="stateView" width="500px" append-to-body>
            <el-form  :model="cardForm"  label-width="140px">
                <el-form-item label="ids:">
                    {{cardForm.ids}}
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="cardForm.state">
                        <el-option label="等待" value="pending"></el-option>
                        <el-option label="成功" value="success"></el-option>
                        <el-option label="失败" value="failure"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="SubmitForm2(cardForm)">确 定</el-button>
                <el-button @click="userCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {postFttcard20220715s,getFttcard20220715s,putFttcard20220715s } from '@/api/ka/ka'
export default {
    data() {
        return {
            addView:false,
            stateView:false,
            selectioned:[],
            cardForm:{
                ids:'',
                cellphones:'',
                state:''
            },
            list:[],
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            total:0,
        }
    },
    created(){
        this.getList()
    },
    methods:{
        //列表
        getList(){
            let data = this.addDateRange(this.queryParams)
            getFttcard20220715s(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //新增
        handleCard(){
            this.addView = true
            this.cardForm.cellphones = ''
        },
        //修改
        handleState(){
            this.stateView = true
            let arr = []
            this.selectioned.forEach(item=>{
                arr.push(item.id)
            })
            let str = arr.join()
            this.cardForm.ids = str
        },
        //选择
        handleSelection(val){
            this.selectioned = val
        },
        //新增确定
        SubmitForm(){
            postFttcard20220715s({cellphones:this.cardForm.cellphones}).then(res=>{
                if(res.code == 200){
                    this.msgSuccess("新增成功");
                    this.getList()
                    this.addView = false
                }
            })
        },
        //修改确定
        SubmitForm2(val){
            let data = {
                id:0,
                ids:val.ids,
                state:val.state
            }
            putFttcard20220715s(data).then(res=>{
                if(res.code == 200){
                    this.msgSuccess("修改成功");
                    this.getList()
                    this.stateView = false
                }
            })
        },
        //取消
        userCancel(){
            this.addView = false
            this.stateView = false
            this.cardForm.cellphone = undefined
            this.cardForm.state = undefined
        },
    }
}
</script>
<style scoped>
.page {width:100%; height:auto; min-height:90vh; background: #eee; padding:20px;}
.part1_box {background:#fff; width:100%; padding:20px; margin-bottom:20px; border-radius: 20px;}
</style>
